import { createRouter , createWebHistory } from 'vue-router' ;

import routes from './routes';

const router = createRouter({
    routes ,
    history: createWebHistory()
});

// 导航守卫: 全局前置守卫
// 导航被触发 并且 失活组件的 beforeRouteLeave 执行 后才调用 beforeEach
router.beforeEach( ( to , from ) => {
    console.log( '全局前置守卫: from = ' , from.path );
    console.log( '全局前置守卫: to = ' , to.path );
});

// 导航守卫: 全局解析守卫
// 在导航被确认之前、同时所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用
// beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置
router.beforeResolve( (to,from) => {
    console.log( `全局解析守卫: 从 ${from.path} 到 ${ to.path }` );
});

// 导航守卫: 全局后置钩子
// 导航被确认 后才调用全局的 afterEach 钩子
router.afterEach( ( to , from ) => {
    console.log( '全局后置钩子: from = ' , from );
    console.log( '全局后置钩子: to = ' , to );
    document.title = to.meta.title ;
});

export default router ;